<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<meta name = "viewport" content = "width=device-width,user-scalable=no">
		<style>
			html{
				font-size: 42px;
			}
			body{font-family: "Microsoft YaHei",serif;max-width: 1080px;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			.wrap{
				width: 100%;
				margin:auto;
			}
			.wrap>.gallery{
				position:relative;
				height: 8.33rem;
				background: url("img/1.jpg") no-repeat center / contain, #eee 35% url(img/lizard.png);
			}
			.wrap>.gallery p{
				font-size: 0.452rem;
				text-align: center;
				background-color: rgba(0,0,0,0.5);
				color:#fff;
			}
			#num{
				font-size: 0.452rem;
				color:#ecad9e;
			}
			.wrap>.gallery .switch-btn{
				position:absolute;
				width: 1.19rem;
				height: 1.19rem;
				top:0;
				bottom:0;
				margin:auto;
				background-color: #f4606c;
			}
			#left{
				left:0;
			}
			#right{
				right:0;
			}
			.wrap>.gallery .introduct{
				position:absolute;
				width: 100%;	/*用了绝对定位后,元素就浮动起来,这个p就不继承父元素的宽度了,说以要定义自身的width*/
				bottom:0;
			}
			.wrap>.btns{
				width: 4.881rem;
				height: 1.19rem;
				margin:1.19rem auto;
			}
			.wrap>.btns .btn{
				width: 2.381rem;
				height: 1.19rem;
				background-color: #beedc7;
				outline: none;
				border:none;
				border-radius: 0.238rem;
			}
			#limit{
				background-color: #ECAD9E;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="gallery">
				<p class="number"><span id="num">1</span>/4</p>
				<div id="left" class="switch-btn"><</div>
				<div id="right" class="switch-btn">></div>
				<p class="introduct">高清无码美图</p>
			</div>
			<div class="btns">
				<button id="limit" class="btn">正常模式</button>
				<button id="loop" class="btn">循环模式</button>
			</div>
		</div>
		<script>
			let oNum = document.querySelector("#num");
			let oImg = document.querySelector(".wrap>.gallery");
			let	oLeft = document.querySelector("#left");
			let	oRight = document.querySelector("#right");
			let aBtn = document.querySelectorAll(".wrap>.btns .btn");
			let num = 1;
			let pattern = 1;
			aBtn[0].onclick = function(){
				pattern = 1;
				aBtn[0].style.backgroundColor = "#ECAD9E";
				aBtn[1].style.backgroundColor = "#beedc7";
			}
			aBtn[1].onclick = function(){
				pattern = 2;
				aBtn[1].style.backgroundColor = "#ECAD9E";
				aBtn[0].style.backgroundColor = "#beedc7";
			}
			oLeft.onclick = function(){
				num--;
				if(num<1){
					if(pattern==1){
						alert("第一张啦！不能再往下啦啦啦");
						num = 1;
					}else num = 4;
				
				}
				oNum.innerText = num; 
				oImg.style.backgroundImage = `url('img/${num}.jpg'),url(img/lizard.png)`;//注意不能在属性语句后面加上;,否则显示不出来
			}
			oRight.onclick = function(){
				num++;			
				if(num>4){
					if(pattern==1){
						alert("最后一张啦！不能再往下啦啦啦")
						num = 4;
					}
					else num = 1;
				}
				oNum.innerText = num; 
				oImg.style.backgroundImage = `url('img/${num}.jpg'),url(img/lizard.png)`;//注意不能在属性语句后面加上;,否则显示不出来
			}
		</script>
	</body>
</html>
